<template>
    <div>
        <el-card class="bottom10">
            <el-row>
                <el-col :span="6">
                    <div>
                        <span style="margin-right: 4px;"> 关键词：</span>
                        <el-input v-model="input" clearable placeholder="请输入节点组名称" @change="inputChange" style="width:200px">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="3" :push="15">
                    <el-button class="float-right" type="primary">创建监测任务</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card>
            <span>
                <el-button type="primary">批量启动</el-button>
                <el-button type="warning">批量暂停</el-button>
                <el-button type="danger">批量删除</el-button>
            </span>
            <e-table :tableConfig="tableConfig" :tableData="tableData" />
        </el-card>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import ETable from 'comps/eTable/index.vue';
export default defineComponent({
    name: 'equipmentManage',
    components: { ETable },
    setup() {
        const input = ref('');
        const inputChange = (v: String | Number) => {
            console.log(v);
        };
        const tableConfig = reactive(
            //表格配置
            {
                checkbox: true,
                thead: [
                    { lable: '监测节点组名称', prop: 'name' },
                    { lable: '节点数据', prop: 'data' },
                    { lable: '监测终端', prop: 'num' },
                    { lable: '更新时间', prop: 'time' }
                ],
                operates: [
                    {
                        id: 1,
                        label: '编辑',
                        type: 'text',
                        method: (index: any, row: any) => {
                            console.log(row);
                            console.log(11);
                        }
                    },
                    {
                        id: 2,
                        label: '删除',
                        type: 'text',
                        method: (index: any, row: any) => {
                            console.log(row);
                            console.log(22);
                        }
                    }
                ]
            }
        );
        const tableData = reactive([
            {
                id: '1',
                name: '华东监测组',
                data: '1000',
                num: '310',
                time: '2016-05-02 10:55:01'
            },
            {
                id: '2',
                name: '华东监测组',
                data: '1000',
                num: '310',
                time: '2016-05-02 10:55:01'
            },
            {
                id: '3',
                name: '华东监测组',
                data: '1000',
                num: '310',
                time: '2016-05-02 10:55:01'
            }
        ]);
        return {
            input,
            inputChange,
            tableConfig,
            tableData
        };
    }
});
</script>

<style lang="" scoped>
</style>